<template>
  <div v-if="data.dataList.length > 0">
    <div class="tabs">
      <div
        class="tab-item"
        :class="data.activeProfitTab == item.id ? 'active' : ''"
        :key="item.id"
        v-for="item in data.dataList"
        @click="handleClickProfitTab(item.id)"
      >
        <el-popover effect="light" placement="top" width="auto">
          <template #default>
            {{ item.name }}
          </template>
          <template #reference>
            {{ item.name }}
          </template>
        </el-popover>
      </div>
    </div>
    <div class="edit-line"></div>
    <div v-if="data.shareProfitId">
      <DateTab
        :tabData="data.formData"
        @data="getTab"
        @changeDate="getTab"
      ></DateTab>
      <div class="edit-line"></div>
      <div class="card">
        <div class="icon-top"></div>
        <div class="card-content com-head-wrap1">
          <div class="card-data">
            <div class="card-item">
              <div class="iconfont icon-charging-capacity"></div>
              <div class="right">
                <div class="title">充电度数（度）</div>
                <div class="title">
                  {{
                    data.detailData?.power
                      ? formatNumber(data.detailData.power)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="iconfont icon-electricity-fee"></div>
              <div class="right">
                <div class="title">实收电费（元）</div>
                <div class="title">
                  {{
                    data.detailData?.powerAmount
                      ? formatNumber(data.detailData.powerAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="iconfont icon-service-fee"></div>
              <div class="right">
                <div class="title">实收服务费（元）</div>
                <div class="title">
                  {{
                    data.detailData?.serviceAmount
                      ? formatNumber(data.detailData.serviceAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="iconfont icon-dividend"></div>
              <div class="right">
                <div class="title">服务费分润（元）</div>
                <div class="title">
                  {{
                    data.detailData.otherShareAmount
                      ? formatNumber(data.detailData.otherShareAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="icon-bottom"></div>
      </div>
      <el-tabs
        v-model="data.activeTab"
        class="demo-tabs"
        @tab-click="handleClickTab"
      >
        <el-tab-pane label="电站" name="station">
          <Table
            ref="tableStationRef"
            v-show="data.activeTab === 'station'"
            :columns="data.columns"
            :toolbar="data.toolbar"
            :query="data.query"
            @get-list="getData"
          ></Table>
        </el-tab-pane>
        <el-tab-pane label="订单明细" name="order">
          <Table
            v-if="data.activeTab === 'order'"
            ref="tableRef"
            :columns="orderData.columns"
            :toolbar="orderData.toolbar"
            :query="orderData.query"
            @get-list="getOrderData"
          ></Table
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <div v-else>
    <div class="no-data-wrap">
      <div class="no-data"></div>
      <div class="text">暂无数据</div>
    </div>
  </div>
</template>
    
<script lang="ts" setup name="singleDividendList">
import Table from '@/components/table/index.vue';
import DateTab from '@/components/dateTab/index.vue';
import {
  pagingShareProfit,
  pagingShareStationRecord,
  pagingShareRecord,
  getShareTotalInfo,
  EXPORT_SHARESTATIONREACORD,
  EXPORT_SHAREREACORD,
} from '@/service/apis/financial';
import { formatNumber, exportFile } from '@/utils/utils';

const router = useRouter();

const tableRef = ref();
const tableStationRef = ref();

const data = reactive({
  activeProfitTab: '',
  dataList: [] as any,
  detailData: {} as any,
  activeTab: 'station',
  formData: {} as any,
  shareProfitId: '',
  type: 1,
  columns: [
    {
      prop: 'stationName',
      label: '电站名称',
    },
    {
      prop: 'orgName',
      label: '归属运营商',
    },
    {
      prop: 'power',
      label: '充电电量',
    },
    {
      prop: 'powerAmount',
      label: '实收电费',
    },
    {
      prop: 'serviceAmount',
      label: '实收服务费',
    },
    {
      prop: 'shareType',
      label: '分润模式',
    },
    {
      prop: 'otherShareAmount',
      label: '分润金额',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'singleDividendList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_SHARESTATIONREACORD,
          '单分润方电站列表',
          data.formData
        );
      },
    },
  ],
  query: [
    {
      label: '电站名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入电站名称',
      },
    },
  ],
});
const orderData = reactive({
  columns: [
    {
      prop: 'orderId',
      label: '充电订单',
    },
    {
      prop: 'stationName',
      label: '电站名称',
    },
    {
      prop: 'connectorCode',
      label: '终端编码',
    },
    {
      prop: 'userOrgName',
      label: '用户归属企业',
    },
    {
      prop: 'createTime',
      label: '支付时间',
    },
    {
      prop: 'power',
      label: '充电电量',
    },
    {
      prop: 'powerAmount',
      label: '实收电费',
    },
    {
      prop: 'serviceAmount',
      label: '实收服务费',
    },
    {
      prop: 'shareType',
      label: '分润模式',
    },
    {
      prop: 'otherShareAmount',
      label: '分润金额',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'singleDividendList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(EXPORT_SHAREREACORD, '单分润方订单明细 ', data.formData);
      },
    },
  ],
  query: [
    {
      label: '电站名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入电站名称',
      },
    },
  ],
});
const handleClickTab = (e: any) => {
  if (e.props.name === 'station') {
    data.type = 1;
    data.formData.stationName = '';
    tableStationRef.value?.handleQuery();
  } else {
    data.type = 0;
    data.formData.stationName = '';
    tableRef.value?.handleQuery();
  }
};
const handleClickProfitTab = (e: any) => {
  data.activeProfitTab = e;
  data.shareProfitId = e;
  console.log(data.shareProfitId);
  if (data.activeTab === 'station') {
    data.type = 1;
    tableStationRef.value?.handleQuery();
  } else {
    data.type = 0;
    tableRef.value?.handleQuery();
  }
};
const getTab = (value: any) => {
  data.formData = Object.assign(data.formData, value);
  console.log('====', data.formData);
  console.log('==data.type==', data.type);
  if (data.type === 1) {
    tableStationRef.value?.handleQuery();
  } else {
    tableRef.value?.handleQuery();
  }
};

pagingShareProfit({}, { pageNo: -1, pageSize: -1 }).then((res: any) => {
  if (res) {
    data.dataList = res.dataList;
    data.activeProfitTab = data.dataList[0].id;
    data.shareProfitId = data.dataList[0].id;
  }
});

const getData = (page: any, search: any) => {
  const form = search.ruleForm;
  const tableData = Object.assign(form, { shareProfitId: data.shareProfitId });
  data.formData = Object.assign(data.formData, tableData);
  pagingShareStationRecord(data.formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        tableStationRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
  getShareTotalInfo(data.formData, page).then((res: any) => {
    if (res) {
      data.detailData = res;
    } else {
      data.detailData = {};
    }
  });
};
const getOrderData = (page: any, search: any) => {
  // const formData = Object.assign(data.formData, {orgId: id})
  const form = search.ruleForm;
  const tableData = Object.assign(form, { shareProfitId: data.shareProfitId });
  data.formData = Object.assign(data.formData, tableData);
  pagingShareRecord(data.formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getOrderData(page, search);
        return;
      }
      nextTick(() => {
        tableRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
  getShareTotalInfo(data.formData, page).then((res: any) => {
    if (res) {
      data.detailData = res;
    } else {
      data.detailData = {};
    }
  });
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
.tabs {
  display: flex;
  height: 32px;
  margin-bottom: 6px;
  .tab-item {
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #5073f7;
    padding: 6px 16px;
    border: 1px solid #c4c4c4;
    border-left: 0;
    text-align: center;
    cursor: pointer;
    &:first-child {
      border-radius: 8px 0px 0px 8px;
      border-left: 1px solid #c4c4c4;
    }
    &:last-child {
      border-radius: 0px 8px 8px 0px;
    }
  }
  .active {
    background: #e5e8f6;
  }
}
.card {
  padding: 30px 0;
  margin: 20px 0;
  .card-content {
    width: 100%;
    .card-data {
      .card-item {
        display: flex;
        text-align: left;
        .title {
          margin-left: 12px;
        }
        .iconfont {
          font-size: 56px;
        }
      }
    }
  }
}
</style>
